<template>
    <el-form ref="ruleFormRef" style="max-width: 100%" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户名" prop="userName" required>
            <el-input v-model="ruleForm.userName" :disabled="ifDisabled" />
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
            <el-input v-model="ruleForm.password" show-password />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName" required>
            <el-input v-model="ruleForm.realName" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age" type="number" />
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="ruleForm.sex" placeholder="性别">
                <el-option :label="'男'" :value="1" />
                <el-option :label="'女'" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
            <el-date-picker v-model="ruleForm.birthDay" type="date" aria-label="选择日期" placeholder="选择日期"
                style="width: 100%" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
            <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="年级" required>
            <el-select v-model="ruleForm.userLevel" placeholder="年级">
                <el-option v-for="level in level.list" :key="level.value" :label="level.name" :value="level.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态" required>
            <el-select v-model="ruleForm.status">
                <el-option :label="'启用'" :value="1" />
                <el-option :label="'禁用'" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useLevelStore } from '@/store/level'
import { userEdit, userSelect } from '@/api/user'
import { useRouter } from 'vue-router'
import router from '@/router'

const { currentRoute } = useRouter()
// console.log(currentRoute.value.query.id);
const userId = ref<number>()
const ifDisabled = ref(false)
if (currentRoute.value.query.id) {
    userId.value = Number(currentRoute.value.query.id as string)
    console.log(userId.value);
    ifDisabled.value = true
}
const level = useLevelStore()

export interface RuleForm {
    id: any,
    userName: string
    password: string
    realName: string
    role: number
    age: number | string
    sex: number
    birthDay: string
    phone: string
    userLevel?: number | string
    status: number
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    id: userId,
    userName: '',
    password: '',
    realName: '',
    role: 1,
    status: 1,
    age: '',
    sex: 1,
    birthDay: '',
    phone: '',
    userLevel: '',
})

const rules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    realName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    userLevel: [
        {
            required: true,
            message: '请选择年级',
            trigger: 'change',
        },
    ],
    status: [
        {
            required: true,
            message: '请选择状态',
            trigger: 'change',
        },
    ],
})

function getData() {
    userSelect(userId.value).then(res => {
        // console.log(res.response);
        ruleForm.userName = res.response?.userName as string
        ruleForm.realName = res.response?.realName as string
        ruleForm.age = res.response?.age as number
        ruleForm.sex = res.response?.sex as number
        ruleForm.birthDay = res.response?.birthDay as string
        ruleForm.phone = res.response?.phone as string
        ruleForm.userLevel = res.response?.userLevel as number
        ruleForm.status = res.response?.status as number
    })
}

function handleEdit() {
    // console.log(ruleForm);
    userEdit(ruleForm).then(res => {
        console.log(res.response);
        if (res.code === 1) {
            ElMessage({
                message: '提交成功',
                type: 'success',
                duration: 1500,
            })
            router.push('/student/list')
        }
    })
}

onMounted(() => {
    if (ifDisabled.value) {
        getData()
    }
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            handleEdit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>